<template>
	<view class="container">
		<form @submit="submit">
			<view class="header">
				<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
					<image :src="form.avatarUrl" class="avatar"></image>
				</button>
				<view class="phone">{{ form.phone }}</view>
			</view>
			<view class="content">
				<!-- 			<view>
					<text>昵称：</text>
					<input type="nickname" class="weui-input" :value="userName" @blur="bindblur" placeholder="请输入昵称"
						@input="bindinput" />
				</view> -->
				<view class="form-item">
					<label>昵称</label>
					<input type="nickname" :value="form.nickname" @blur="bindblur" placeholder-style="color: #c8c9cc;" placeholder="请输入你的昵称" @input="bindinput" />
					<!-- <input type="text" placeholder="请输入您的姓名" placeholder-style="color: #c8c9cc;" v-model="form.nickname" /> -->
				</view>
				<!-- <view class="form-item">
					<label>会员性别</label>
					<view class="sex">
						<text v-for="(sex, index) in sexs" :key="index" @tap="form.sex = sex.text === '男' ? 1 : 2" :class="form.sex === index + 1 ? 'sex-active' : ''">
							{{ sex.text }}
						</text>
					</view>
				</view>
				<view class="form-item">
					<label>生日</label>
					<uni-datetime-picker type="date" :clear-icon="true" v-model="form.birthday" @maskClick="maskClick">
						<text v-if="form.birthday">{{ form.birthday }}</text>
						<text style="color: #d3c9cc" v-else>请选择你的生日</text>
					</uni-datetime-picker>
				</view> -->
			</view>

			<view class="submit-wrapper">
				<text class="submit" @tap="submit">保存</text>
			</view>
		</form>
	</view>
</template>
<script>
import { getUser, updateUser,getQiniuToken } from '@/api/user';
import { validateNotEmpty } from '@/utils/validate.js';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			userName: '',
			sexs: [
				{
					text: '男'
				},
				{
					text: '女'
				}
			],
			form: {
				avatarUrl: '',
				nickname: '',
				// sex: '',
				// birthday: '',
				phone: ''
			},
			oldAvaUrl: '',
			isAvatarFile: false,
			rules: {}
		};
	},
	onLoad(params) {},
	onShow() {
		this.getUser();
	},
	computed: {
		...mapGetters(['token'])
	},
	methods: {
		getUser() {
			getUser().then((res) => {
				this.form = res.data;
				if (this.form.avatarUrl) {
					// this.form.avatarUrl = this.baseUrl + this.form.avatarUrl;
					this.form.avatarUrl =this.form.avatarUrl;
				}
				this.oldAvaUrl = this.form.avatarUrl;
			});
		},
		bindblur(e) {
			this.form.nickname = e.detail.value; // 获取微信昵称
		},
		bindinput(e) {
			this.form.nickname = e.detail.value; // 获取微信昵称
		},
		onChooseavatar(e) {
			this.form.avatarUrl = e.detail.avatarUrl;
		},
		async submit() {
			let avatarUrl = null;
			if (this.isAvatarFile) {
				avatarUrl = this.form.avatarUrl;
			}
			
			// const title = validateNotEmpty(['姓名', '性别', '生日'], [this.form.nickname, this.form.sex, this.form.birthday]);
			const title = validateNotEmpty(['昵称'], [this.form.nickname]);
			if (title != null) {
				uni.showToast({
					title: title,
					mask: true,
					icon: 'none',
					duration: 1000
				});
				return;
			}
			// 不相等说明修改了头像文件
			const isAvatarFile = this.oldAvaUrl === this.form.avatarUrl ? false : true;
			const res = await updateUser(isAvatarFile, this.form, this.token);
			if (res.code === 200) {
				uni.showToast({
					title: '更新成功',
					mask: true,
					success: () => {
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					}
				});
			}
		}
	}
};
</script>
<style>
.uni-date {
	width: 200rpx !important;
	flex: unset !important;
	text-align: right;
}
</style>
<style lang="less" scoped>
@theme-color: #ff5a14;

.container {
	padding: 30rpx 20rpx;
}

.header,
.content {
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-radius: 20rpx;
}

.header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20rpx;

	button {
		margin: 0;
		padding: 0;
		background-color: #fff;
		width: 150rpx;
		height: 150rpx;

		.avatar {
			width: 100%;
			height: 100%;
		}
	}

	.phone {
		color: #666666;
		font-size: 28rpx;
	}
}

.content {
	margin-top: 25rpx;

	.form-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f9f9fa;

		input {
			text-align: right;
			width: 200rpx;
		}
	}

	.sex {
		display: flex;
		flex-direction: row;
		gap: 15rpx;

		text {
			padding: 10rpx 50rpx;
			background-color: #fff;
			border: 1rpx solid #a4adb3;
			border-radius: 100rpx;
		}

		.sex-active {
			background-color: @theme-color;
			color: #fff;
			border: 1rpx solid #fff;
		}
	}
}

.submit-wrapper {
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 150rpx;
	padding: 0 10%;
	text-align: center;
	color: #fff;

	.submit {
		display: block;
		width: 100%;
		background-color: @theme-color;
		padding: 25rpx 0;
		border-radius: 100rpx;
	}
}
</style>
